<template>
  <view class="mePage">
    <view class="header">
      <uni-card class="headerCard" is-shadow :title="loginUser.userAccount" :isFull="true"
                :extra="isLogin ? '已登录': '未登录' "
                :thumbnail="loginUser.userAvatar" @click="handleToUserInfo"/>
    </view>
    <view class="function-list">
<!--      <uni-card is-shadow :isFull="true">-->
<!--        <uni-list class="list">-->
<!--          <uni-list-item title="服务" icon="service-icon" showArrow/>-->
<!--          <uni-list-item title="收藏" icon="favorite-icon"/>-->
<!--          <uni-list-item title="朋友圈" icon="friend-circle-icon"/>-->
<!--          <uni-list-item title="视频号" icon="video-icon"/>-->
<!--          <uni-list-item title="卡包" icon="card-icon"/>-->
<!--          <uni-list-item title="表情" icon="emoji-icon"/>-->
<!--          <uni-list-item title="设置" icon="setting-icon"/>-->
<!--        </uni-list>-->
<!--      </uni-card>-->
    </view>
  </view>
</template>

<script setup lang="ts">
import {effect, ref} from 'vue'
import {getCurrentUserUsingGet} from "@/services/api/sysUserController";
import {LOGIN_EVENT, LOGOUT_EVENT} from "@/constants/sysConstants";
import {onLoad, onPullDownRefresh, onUnload} from "@dcloudio/uni-app";


const defaultUser = {
  userAccount: "游客",
  userAvatar: "../../static/logo.png"
}

const loginUser = ref<API.SysUser>({...defaultUser});
const isLogin = ref<boolean>(false);

/**
 * 初始化数据
 */
const initData = () => {
  isLogin.value = false;
  loginUser.value = {...defaultUser};
}

/**
 * 进入用户页
 */
const handleToUserInfo = () => {
  uni.navigateTo({
    url: "/pages/user/userInfo/index"
  })
}

/**
 * 加载数据
 */
const loadData = async () => {
  const data = await getCurrentUserUsingGet();
  if (data) {
    loginUser.value = data as API.SysUser;
    isLogin.value = true;
  } else {
    initData();
  }
}

/**
 * 页面监听事件
 */
const initEvent = () => {
  uni.$on(LOGIN_EVENT, () => {
    loadData();
  })
  uni.$on(LOGOUT_EVENT, () => {
    initData();
  })
}

/**
 * 页面加载
 */
onLoad(() => {
  initEvent();
})

onUnload(() => {
  uni.$off(LOGIN_EVENT);
  uni.$off(LOGOUT_EVENT);
});

/**
 * 下拉刷新
 */
onPullDownRefresh(async () => {
  await loadData();
  uni.stopPullDownRefresh();
})

effect(() => {
  loadData();
}, {})

</script>

<style scoped>
.mePage {
  padding: 5px 0 5px 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(to right, #ebf1fd, #ffffff);

  .header {
    margin: 0 5px 0 5px;

    .headerCard {
      background: linear-gradient(to right, #ebf1fd, #ffffff);
    }
  }

  .function-list {
    margin: 5px 5px 0 5px;

    .list {
      background: linear-gradient(to right, #ebf1fd, #ffffff);

    }
  }
}


</style>
